﻿@page "/linear-gauge/styles"

@using Syncfusion.Blazor.LinearGauge

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the available customizing options in linear gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>In this sample, we have indicated a value in various styles using bar and marker pointers. You can display any number of pointers in an axis.</p>
</ActionDescription>

<div class="control-section">
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="100px">
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeLine Color="#9E9E9E"/>
                <LinearGaugeMajorTicks Color="#9E9E9E" Height="20" Interval="10"/>
                <LinearGaugeMinorTicks Color="#9E9E9E" Height="10" Interval="5"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="80" Height="13" Width="13" Offset="10"/>
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="100px" Width="100%">
        <LinearGaugeContainer Width="30" Offset="-20" BackgroundColor="#e0e0e0">
            <LinearGaugeContainerBorder Width="0"/>
        </LinearGaugeContainer>
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeLine Offset="30"/>
                <LinearGaugeAxisLabelStyle Offset="50"/>
                <LinearGaugeMajorTicks Interval="10" Height="20"/>
                <LinearGaugeMinorTicks Interval="5" Height="10"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="10" Height="15" Width="15" Placement="Placement.Near" Offset="-50" MarkerType="MarkerType.Triangle"/>
                </LinearGaugePointers>
                <LinearGaugeRanges>
                    <LinearGaugeRange Start="0" End="10" StartWidth="30" EndWidth="30" Color="#30b32d"/>
                </LinearGaugeRanges>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="130px">
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeLine Offset="-20" Color="#9E9E9E"/>
                <LinearGaugeMajorTicks Interval="10" Height="20" Color="#9E9E9E"/>
                <LinearGaugeMinorTicks Color="#9E9E9E" Height="10" Interval="5"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="70" Height="13" Width="13" Offset="20"/>
                    <LinearGaugePointer Value="70" Height="10" Type="Point.Bar" Color="red"/>
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="100px">
        <LinearGaugeContainer Width="30" Offset="0" BackgroundColor="#e0e0e0">
        </LinearGaugeContainer>
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeLine Width="0"/>
                <LinearGaugeAxisLabelStyle Offset="55"/>
                <LinearGaugeMajorTicks Interval="10" Height="0"/>
                <LinearGaugeMinorTicks Height="0"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="60" Height="15" Width="15" Offset="-50" Placement="Placement.Near" MarkerType="MarkerType.Triangle"/>
                    <LinearGaugePointer Value="60" Height="30" Type="Point.Bar" Color="#ff9200"/>
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
</div>
